<template>
  <div style="height: 600px;">
    <MindMap
      v-model="mmData"
      :gps="true"
      :draggable="true"
      :keyboard="true"
      :showNodeAdd="true"
      :contextMenu="true"
      :zoomable="true"
      :showUndo="false"
      :download="false"
      :need-edit="false"
      :show-color-picker="true"
      @updateNodeName="updateNodeName"
      @click="clickHandler"
    />
  </div>
</template>

<script>
import MindMap from '@/plugins/dz-mind-map/mindmap.umd.min'
import mmData from './testData'

export default {
  name: 'DzMindMap',
  components: { MindMap },
  data () {
    return {
      mmData
    }
  },
  mounted () {
    this.$watch('mmData', (newVal) => {
      // console.log(JSON.stringify(newVal), 'line 131 131 131')
    }, {
      immediate: true,
      deep: true
    })
  },
  methods: {
    clickHandler (e) {
      console.log(e)
    },
    updateNodeName () {
    }
  }
}
</script>

<style>
#mindmap {
  height: 100%;
}
</style>
